<template>
	<Layout :class="'bg-white p-2'">
		<Row :class="'m-1'">
		<Button type="error" @click="newCar" style="margin-left: 20px;">新增</Button>
		</Row>
		<Row :class="'m-1'">
            <Input :class="'w-25 m-2'" v-model="searchKey" placeholder="请输入检索关键字" />
			<Button type="primary" shape="circle" @click="search" icon="ios-search">查询</Button>            
		</Row>
		<Layout :class="'bg-white'">
			<div v-for="CarRentClientVo in tableInfo.data" style="margin-bottom: 5px; border: 0.05cm groove #D3D3D3;border-radius:20px;height: 200px;">
                <h5 style="margin: 15px;">标题：{{CarRentClientVo.title}}</h5>
                <div style="margin: 15px;">详情：
                    <p style="display: inline-block;">{{CarRentClientVo.details}}</p>
                    <row> 发布人:{{CarRentClientVo.personName}} || 发布人电话:{{CarRentClientVo.tel}} || 发布人微信:{{CarRentClientVo.wxNumber}}</row>
                   
                </div>
                <div style= "margin-top: 40px;">
                    
                        <Button type="primary" size="small" style="margin-left: 30px;" @click="show(CarRentClientVo.crId)">详细</Button>
                        <Button type="error" size="small" style="margin-left: 10px;" @click="remove(CarRentClientVo.crId)">删除</Button>
                   
                </div>
            </div>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch" :total="tableInfo.total" />
		</Layout>
	</Layout>
</template>

<script>
	export default {
		data() {
			return {
					searchKey: "",
					tableInfo: {
						currentPage: 1,
						total: 0,
						pageSize: 5,
						data: [],
                    },
			};
		},
		methods: {
			init: function() {
				this.$data.tableInfo.currentPage = 0;
                // this.getConditions();
				this.search();
			},
			newCar: function() {
				this.$router.push({
					name: "carRent_new"
				});
			},
			show: function(crId) {
                
				this.$router.push({
					name: "carRent_detail",
					params: {
						crId
					}
				});
			},
          
            
            
			search: function() {
               
				this.http.get({
					url: "/car-rent-info/page",
					param: {
						currentPage: this.$data.tableInfo.currentPage,
						searchKey: this.$data.searchKey,
					}
				}).then(data => {
					this.$data.tableInfo.currentPage = data.current;
					this.$data.tableInfo.total = data.total;
					this.$data.tableInfo.pageSize = data.size;
					console.log(data)
					this.$data.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				console.log(changedPage);
				this.$data.tableInfo.currentPage = changedPage;
				this.search();
			},
			remove: function(crId) {
				
				this.message.confirm({
					title: "删除提示",
					content: "即将删除买车信息，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/car-rent-info/info",
							param: {
								crId
							}
						}).then(data => {
                            this.message.info('删除成功');
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
            // getConditions: function(){
                
            //     this.http.get({
            //     	url: "/car-condition/all",
            //     	param: {}
            //     }).then(data => {
            //     	this.$data.carConditions = data;
            //     });
            //     console.log(this.$data.carConditions)
            // },
            // chConditionId: function(){
                
               
            //     this.search();
            // }
		},
		created: function() {
            
			this.init();
		},
	}
</script>

<style>
    .el-dropdown-link {
        
        cursor: pointer;
        color: #409EFF;
      }
    .el-icon-arrow-down {
    font-size: 12px;
    }
    .el-button--primary {
        color: #000;
        background-color: #fff;
        border-color: lightgray;
        margin-left: 10px;
    }
</style>
